// 3D卡片翻转样式
.flip-card-3d {
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  
  .card-controls {
    margin-bottom: 24px;
    text-align: center;
  }

  .cards-container {
    margin-bottom: 24px;
  }

  .card-wrapper {
    perspective: 1000px;
    height: 280px;
    cursor: pointer;
    
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    &.flipped .card-inner {
      transform: rotateY(180deg);
    }
    
    .card-front,
    .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 16px;
      border: 2px solid;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      
      .card-content {
        padding: 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
          pointer-events: none;
        }
      }
      
      .card-icon {
        margin-bottom: 16px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
      }
    }
    
    .card-back {
      transform: rotateY(180deg);
      
      .card-content {
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        
        .details-list {
          width: 100%;
          
          .detail-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            
            .detail-dot {
              color: rgba(255, 255, 255, 0.8);
              margin-right: 8px;
              font-size: 16px;
            }
          }
        }
      }
    }
    
    // 悬停效果
    &:hover {
      .card-inner {
        transform: translateY(-8px) rotateX(5deg);
      }
      
      &.flipped .card-inner {
        transform: translateY(-8px) rotateX(5deg) rotateY(180deg);
      }
    }
    
    // 动画效果
    &:not(.flipped) {
      animation: cardFloat 4s ease-in-out infinite;
    }
  }

  .flip-hint {
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    backdrop-filter: blur(10px);
  }
}

// 季节特定样式
.season-spring .flip-card-3d {
  .card-wrapper:hover .card-inner {
    box-shadow: 0 15px 40px rgba(82, 196, 26, 0.3);
  }
}

.season-summer .flip-card-3d {
  .card-wrapper:hover .card-inner {
    box-shadow: 0 15px 40px rgba(24, 144, 255, 0.3);
  }
}

.season-autumn .flip-card-3d {
  .card-wrapper:hover .card-inner {
    box-shadow: 0 15px 40px rgba(250, 140, 22, 0.3);
  }
}

.season-winter .flip-card-3d {
  .card-wrapper:hover .card-inner {
    box-shadow: 0 15px 40px rgba(114, 46, 209, 0.3);
  }
}

// 动画关键帧
@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0);
  }
  50% {
    transform: translateY(-5px) rotateX(2deg);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .flip-card-3d {
    padding: 16px;
    
    .card-wrapper {
      height: 220px;
      
      .card-front,
      .card-back {
        .card-content {
          padding: 16px;
          
          .card-icon span {
            font-size: 36px !important;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .flip-card-3d {
    padding: 12px;
    
    .card-wrapper {
      height: 180px;
      
      .card-front,
      .card-back {
        .card-content {
          padding: 12px;
          
          .card-icon span {
            font-size: 28px !important;
          }
        }
      }
    }
  }
}

// 性能优化
@media (prefers-reduced-motion: reduce) {
  .flip-card-3d {
    .card-wrapper {
      animation: none;
      
      .card-inner {
        transition: none;
      }
      
      &:hover .card-inner {
        transform: none;
      }
    }
  }
}
